<template>
  <div class="ly-consultClass ly-add-btn">
    <div class="ly-add-class" @click="addClass">新增咨询分类</div>
    <div class="ly-search">
      <div class="ly-li">
        <span class="ly-label">分类编码</span>
        <input type="text" class="ly-input" v-model="search.name" placeholder="请填写分类编码"/>
      </div>
      <div class="ly-li">
        <span class="ly-label">分类名称</span>
        <input type="text" class="ly-input" v-model="search.name" placeholder="请填写分类名称"/>
      </div>
      <div class="ly-btn">搜索</div>
    </div>
    <div class="ly-table">
      <el-table :data="tableData" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column fixed prop="date" label="序号" width="100"></el-table-column>
        <el-table-column prop="name" label="咨询分类编码" width="220"></el-table-column>
        <el-table-column prop="name" label="咨询分类名称" width="220"></el-table-column>
        <el-table-column prop="zip" label="父分类名称"></el-table-column>
        <el-table-column prop="zip" label="状态" width="220"></el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <span class="ly-btn" @click="getMore(scope.$index,tableData,'up')">编辑</span>
            <span class="ly-btn" @click="getMore(scope.$index,tableData,'down')">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <listPage :pageData="pageList" v-if="pageList.totalRecNum >  pageList.pageSize" @getdata="setPageNo"></listPage>
    <messageBox :prompt="codeContent" @getdata="addClassType"></messageBox>
  </div>
</template>

<script>
  export default {
    name: "consultClass",
    data() {
      return {
        codeContent: {}, // 弹窗内容
        pageList: {
          page: 1, //当前页
          totalRecNum: 300,   //总页数
          pageSize: 25  // 分页条数
        }, // 分页
        maxHeight: 500,
        search: {
          time: '',
          name: '',
          client: '微信'
        },
        client: [
          {
            value: 'null',
            label: '全部'
          }, {
            value: 'weixin',
            label: '微信'
          }, {
            value: 'qq',
            label: 'QQ'
          }, {
            value: 'xinlang',
            label: '新浪'
          }, {
            value: 'apple',
            label: 'apple'
          }],
        tableData: [
          {
            date: '201',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '201602',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20104',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2011',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20108',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20106',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2003',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20162',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2014',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20161',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016508',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20166',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20160507',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }]
      }
    },
    methods: {
      // 查看详情
      getMore(val, rows) {
        console.log(rows[val].date)
      },
      // 获取到的 pageNo
      setPageNo(val) {
        this.pageList.page = val
        // 请求 page页的数据
      },
      // 获取屏幕高度 给table设置最大高度
      getHeight() {
        let vm = this, height = 0
        height = document.documentElement.clientHeight - 265
        vm.maxHeight = height
      },
      // 新增咨询类别 弹窗
      addClass() {
        let client = [
          {
            value: 'null',
            label: '全部 (分类名称为父类名称)'
          }, {
            value: 'weixin',
            label: '微信'
          }]
        let data = {
          state: true, // 是否显示弹出层
          title: '添加咨询分类', // 标题
          className: '',
          type: 'add',
          conserve: '确定',  // 确定按钮 空为不显示按钮
          cancel: true,  // 是否显示取消按钮
          data: client
        }
        this.codeContent = data
      },
      // 保存新增类别
      addClassType(val) {
        console.log("val",val)
      }
    },
    created() {
      this.getHeight()
    }
  }
</script>

<style scoped lang="scss">

</style>